<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="20"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">
					确认抢购
				</view>
			</view>
		</u-navbar>
		<view class="order-info">
			<view class="title">订单信息</view>
			<view class="info">
				<view class="text">积分代码</view>
				<view class="number">{{goodsDetails.billCode}}</view>
			</view>
			<view class="info">
				<view class="text">积分名称</view>
				<view class="number">{{goodsDetails.billName}}</view>
			</view>
			<view class="info">
				<view class="text">发行方</view>
				<view class="number">{{goodsDetails.enterpriseName}}</view>
			</view>
			<view class="info">
				<view class="text">价格</view>
				<view class="number">{{goodsDetails.issuesPrice}}元/个</view>
			</view>
			<view class="info">
				<view class="text">抢购数量</view>
				<u-number-box step="0.1" decimal-length="1" v-model="goodsDetails.maxNumber" :min="0"
					:max="goodsDetails.maxCount"></u-number-box>
			</view>
			<view class="info">
				<view class="text">积分总价</view>
				<view v-if="goodsDetails.level < 2" class="number price">¥{{goodsDetails.totalPrice}}</view>
				<view v-else class="number price">¥{{goodsDetails.actualPrice}}</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="notice">
			<view class="title">购买需知</view>
			<view class="notice-content">
				<view class="text">1、积分商品，一经购买不可退款；</view>
				<view class="text">2、积分商品信息归属企业单位，解释权归属平台和发行 方。请避免一些行为引起的法律纠纷。</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="payment">
			<view class="title">支付方式</view>
			<view class="content">
				<view style="display: flex;align-items: center;">
					<image src="../../../static/common/paymentType.png" class="img"></image>
					<view class="text">余额支付（剩余余额{{userAccount.hotMoney ? userAccount.hotMoney.toFixed(2) : "0.00"}}）
					</view>
				</view>
				<view class="">
					<u-checkbox-group size="14px" @change="checkChange">
						<u-checkbox :checked="checked" inactiveColor="#000000" labelColor="#000000" labelSize="12px"
							size="18px" activeColor="#C09B3A" shape="circle">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</view>

		<view class="footBox">
			<view class="priceCont">
				<view class="points" v-if="goodsDetails.level >= 2
">
					<text>冻结积分(安达一号)：</text>
					{{goodsDetails.totalPoints || 0}}
					<text>个</text>
				</view>
				<view class="price">
					<text>实际支付：￥</text>
					{{goodsDetails.totalPrice}}
				</view>

			</view>
			<view class="buttS">
				<view class="shopping0">
					<view @tap="toShopping('sg')">立即支付</view>
				</view>
			</view>
		</view>
		<view class="account" v-if="openAccountShow">
			<u-popup :show="openAccountShow" mode="center" @close="closePay">
				<view class="openAccountBox">
					<view class="title">未完成实名认证</view>
					<view class="bottom_btn">
						<view class="btn_item lineBtn" @tap="closePay">取消</view>
						<view class="btn_item" @tap="goAccount">去认证</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="account" v-if="isPassword">
			<u-popup :show="isPassword" mode="center" @close="closePay">
				<view class="openAccountBox">
					<view class="title">未设置支付密码</view>
					<view class="bottom_btn">
						<view class="btn_item lineBtn" @tap="closePay">取消</view>
						<view class="btn_item" @tap="goPayPassword">去设置</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="account" v-if="isBalance">
			<u-popup :show="isBalance" mode="center" @close="closePay">
				<view class="openAccountBox">
					<view class="title1">余额不足</view>
					<view class="bottom_btn">
						<view class="btn_item lineBtn" @tap="closePay">取消</view>
						<view class="btn_item" @tap="goRecharge">去充值</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="account" v-if="isSuccess">
			<u-popup :show="isSuccess" mode="center" @close="closePay">
				<view class="openAccountBox">
					<view class="title1">恭喜您抢购成功，中签结果将会在抢购结束后公布，注意查看结果哦~</view>
					<view class="bottom_btn">
						<view class="btn_item lineBtn" @tap="back">确定</view>
						<view class="btn_item" @tap="goLook">去查看</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view v-if="withdrawalFlag" class="withdrawalModal">
			<view class="withdrawalBox">
				<view class="title">请输入转让密码
					<u-icon name="close" class="closeIcon" @tap="closeWithdrawal" color="#999" size="30upx"></u-icon>
				</view>
				<view class="password">
					<view class="flex">
						<view class="password_num" v-for="(item,index) in miney_list">
							<view class="inputCont" v-if="item.id == index">
								<view v-for="(res,i) in withdrawal.payPsw.length" v-show="i == index">
									<view class="miney_data"></view>
								</view>
							</view>
						</view>
					</view>
					<input v-model="withdrawal.payPsw" maxlength="6" type="number" value="123" @input="input_num">
				</view>
			</view>
		</view>
		<u-keyboard ref="uKeyboard" @confirm="confirmWithdrawal" @change="keyChange" @backspace="backspace"
			:showCancel="false" confirmText="确定" mode="number" :dotDisabled="true" :show="keyboardShow"></u-keyboard>
	</view>
</template>

<script>
	import {
		appfundaccountGetDetail,
		appfundaccountList,
		appfundaccountRecharge,
		appfundaccountWithdrawal
	} from '@/api/user.js';
	import {
		rushBuy,
	} from '@/api/home.js'
	import {
		getUser
	} from '@/api/login.js'
	import BigNumber from 'bignumber.js'
	export default {
		data() {
			return {
				checked: true,
				userAccount: {},
				userInfo: {},
				goodsDetails: {
					totalPrice:0,
					actualPrice:0
				},
				openAccountShow: false,
				isPassword: false,
				isBalance: false,
				withdrawalFlag: false,
				keyboardShow: false,
				isSuccess: false,
				miney_list: [{
						id: 0,
						name: ''
					},
					{
						id: 1,
						name: ''
					},
					{
						id: 2,
						name: ''
					},
					{
						id: 3,
						name: ''
					},
					{
						id: 4,
						name: ''
					},
					{
						id: 5,
						name: ''
					},
				],
				withdrawal: {
					payPsw: "",
					setFocus: false
				},
			}
		},
		onLoad() {
			this.goodsDetails = uni.getStorageSync('applyInfo') || {};
			this.computedTotal()
		},
		async onShow() {
			let res = await getUser()
			if (res.status == 200) {
				if (res.data.user.isRealName == 0) {
					this.openAccountShow = true
				}
				this.userInfo = res.data.user
			}
			let row = await appfundaccountGetDetail();
			if (row.data.success) {
				this.userAccount = row.data.obj;
			} else {
				this.userAccount.hotMoney = 0;
			}
		},
		computed: {
			actualPrice: function(){
				debugger
				return 
			}
		},
		watch: {
			'goodsDetails.maxNumber': {
				deep: true,
				handler(newVal, oldVal) {
					this.computedTotal()
				}
			},
		},
		methods: {
			computedTotal() {
				if (this.goodsDetails.level >= 2) {
					this.goodsDetails.totalPrice = new BigNumber(this.goodsDetails.issuesPrice).times(this.goodsDetails
						.maxNumber).div(2).dp(2, BigNumber.ROUND_CEILING).toNumber() || 0;
					this.goodsDetails.totalPoints = new BigNumber(this.goodsDetails.totalPrice).div(this.goodsDetails
						.yearDayPrice).dp(2, BigNumber.ROUND_CEILING).toNumber() || 0;
					this.goodsDetails.actualPrice = new BigNumber(this.goodsDetails.issuesPrice).times(this.goodsDetails
						.maxNumber).dp(2, BigNumber.ROUND_CEILING).toNumber() || 0;
				} else {
					this.goodsDetails.totalPrice = new BigNumber(this.goodsDetails.issuesPrice).times(this.goodsDetails
						.maxNumber).dp(2, BigNumber.ROUND_CEILING).toNumber() || 0;
				}

			},
			checkChange() {
				this.checked = !this.checked;
			},
			toShopping() {
				if(this.goodsDetails.maxNumber <= 0){
					return this.$u.toast('抢购数量必须大于0')
				}
				if(this.goodsDetails.level < 2) {
					if (this.userInfo.isRealName == 0) {
						this.openAccountShow = true;
					} else if (this.userAccount.hotMoney < this.goodsDetails.totalPrice) {
						this.isBalance = true;
					} else if (this.userInfo.accountPassword == "" || this.userInfo.accountPassword == null) {
						this.isPassword = true;
					} else {
						this.keyboardShow = true;
						this.withdrawalFlag = true;
					}
				} else {
					if (this.userInfo.isRealName == 0) {
						this.openAccountShow = true;
					} else if (this.userAccount.hotMoney / 2 < this.goodsDetails.totalPrice) {
						this.isBalance = true;
					} else if (this.userInfo.accountPassword == "" || this.userInfo.accountPassword == null) {
						this.isPassword = true;
					} else {
						this.keyboardShow = true;
						this.withdrawalFlag = true;
					}
				}
				

			},
			closeWithdrawal() { //键盘及密码输入框
				this.withdrawal = {
					payPsw: "",
					setFocus: false
				};
				this.keyboardShow = false;
				this.withdrawalFlag = false;
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			input_num() { //监听密码变化
				const that = this;
				that.miney_list.forEach((item, index) => {
					for (var i = 0; i < that.withdrawal.payPsw.length; i++) {
						if (i == index) {
							that.miney_list[index].name = '*';
						}
					}
				})
			},
			confirmWithdrawal() { //确认提现
				if (this.withdrawal.payPsw.length != 6) {
					return this.$u.toast('请输入正确的支付密码')
				}
				console.log(this.withdrawal);
				let obj = {
					num: this.goodsDetails.maxNumber,
					planId: this.goodsDetails.id,
					accountPassword: this.hrymd5.md5(this.withdrawal.payPsw)
				}

				rushBuy(obj).then(res => {
					console.log(res);
					if (res.data.success) {
						this.closeWithdrawal();
						this.isSuccess = true;
						// this.$u.toast(res.data.msg);
						// setTimeout(() =>{
						// 	this.back();
						// },1500)
					} else {
						this.closeWithdrawal();
						this.$u.toast(res.data.msg);
					}
				})
				// this.keyboardShow = false;
				// this.withdrawalFlag = false;
			},
			keyChange(val) { // 按键被点击
				if (this.withdrawal.payPsw.length <= 5) {
					this.withdrawal.payPsw += val;
				}
			},
			backspace() { // 退格键被点击
				// 删除value的最后一个字符
				if (this.withdrawal.payPsw.length) this.withdrawal.payPsw = this.withdrawal.payPsw.substr(0, this
					.withdrawal.payPsw.length - 1);
			},
			closePay() {
				this.openAccountShow = false;
				this.isPassword = false;
				this.isBalance = false;
				this.isSuccess = false;
			},
			// 去认证
			goAccount() {
				uni.navigateTo({
					url: '/pages/openAccount/index'
				})
			},
			// 设置支付密码
			goPayPassword() {
				uni.navigateTo({
					url: '/pages/setting/payPassword'
				})
			},
			// 余额不足去充值
			goRecharge() {
				uni.navigateTo({
					url: '/pages/user/recharge'
				})
			},
			goLook() {
				uni.redirectTo({
					url: '/pages/user/myApply'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.con-box {
		width: 100%;
		padding-top: 120upx;

		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
			}
		}

		.order-info,
		.payment,
		.notice {
			width: 100%;
			background-color: #fff;
			padding: 32upx 30upx;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;

			.title {
				font-size: 32upx;
				color: #333333;
				margin-bottom: 40upx;
			}

			.info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 60upx;

				.text {
					white-space: nowrap;
					padding-right: 40upx;
				}

				.number {
					color: #333333;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				.price {
					color: #C09B3A;
				}
			}
		}

		.line {
			width: 100%;
			height: 20upx;
			background: #F6F7F9;
		}

		.notice {

			.text {
				line-height: 60upx;
			}
		}

		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.text {
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				padding-left: 18upx;
			}

			.img {
				width: 42upx;
				height: 48upx;
				display: block;
			}
		}

		.footBox {
			// height: 100%;
			width: 100%;
			padding: 20upx 30upx 20upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);


			.shopping0 {
				height: 80upx;
				background: #CEA539;
				border-radius: 10upx;
				padding: 0 96upx;
				width: 100%;
				text-align: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.priceCont {
				display: flex;
				align-items: center;
				font-weight: 600;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				flex-direction: column;
				color: #C09B3A;
				align-items: flex-start;

				.points {}

				.price {}
			}
		}

		.account {
			/deep/.u-popup__content {
				width: 633upx;
				height: auto;
				background: #fff;
				border-radius: 20upx;
				overflow: hidden;

				.header {
					height: 48upx;
					// background: url('../../static/user/border.png');
					// background-size: 100% 100%;
					text-align: center;
					font-size: 32upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					margin: 34upx 38upx 0 38upx;
				}

			}

			/deep/.u-button--info {
				border-color: transparent;
			}

			.openAccountBox {
				background: #FFFFFF;
				text-align: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				padding-top: 50upx;

				.title {
					padding-bottom: 50upx;
				}

				.title1 {
					padding: 0 50upx 50upx;
				}

				.bottom_btn {
					width: 100%;
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #C09B3A;
					display: flex;
					align-items: center;
					justify-content: center;

					box-shadow: 0px 0px 1px 0px #BCBCBC;

					.btn_item {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 88upx;
					}

					.lineBtn {
						box-shadow: 1upx 0px 0px 0px #BCBCBC;
					}
				}
			}
		}

		.withdrawalModal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 10071;
			background-color: rgba($color: #000000, $alpha: 0.2);

			.withdrawalBox {
				width: 600upx;
				padding: 70upx 40upx;
				color: #333;
				background-color: #fff;
				border-radius: 10upx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%);
				margin-top: -400upx;

				.password {
					width: 100%;
					height: 80upx;
					position: relative;

					input {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
					}

					.flex {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.password_num {
							width: 80upx;
							height: 80upx;
							line-height: 80upx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #999;

							.inputCont {
								display: flex;
								align-items: center;

								.miney_data {
									width: 20upx;
									height: 20upx;
									background-color: #000000;
									border-radius: 50%;
								}
							}

						}
					}
				}

				.password::after {
					content: "";
					display: block;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}

				.title {
					color: #333;
					font-size: 30upx;
					line-height: 30upx;
					font-weight: 800;
					text-align: center;
					padding-bottom: 145upx;
					position: relative;

					.closeIcon {
						position: absolute;
						top: -40upx;
						right: 0;
					}
				}
			}
		}

	}
</style>
